<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jb-aptech毕业设计项目</TITLE>
<meta name="renderer" content="ie-comp">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="../css/style.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="../css/menu.css">



    <script src="../script/jquery-3.3.1.min.js"></script>
	<script src="../../js/bootstrap.min.js"></script>
	<script src="../script/common.js"></script>
	<script src="../../js/vue.js"></script>
	<script src="../../js/fusioncharts.js"></script>
	<script src="../../js/fusioncharts-jquery-plugin.min.js"></script>
	<script src="../../js/fusioncharts.theme.fint.js"></script>
	<script src="../../js/fusioncharts.charts.js"></script>
            </head>
<body>
<div id="query">
<div class="page_title">客户贡献分析</div>
<div class="button_bar">
	<button class="common_button" onclick="help('');">帮助</button>
	<button class="common_button" @click="bylike()">查询</button>
	</div>

<table class="query_form_table">
	<tr>
		<th>客户名称</th>
		<td><input  v-model="gx.label"/></td>
		<th>年份</th>
		<td>
			<select v-model="gx.year">
				<option value="">全部</option>
				<option :value="y.year" v-for="y in years">{{y.year}}</option>
			</select>
		</td>
		<th>图表类型</th>
		<td>
			<select v-model="gx.tb" @change="bh()">
				<option value="column3d">柱形图</option>
				<option value="pie2d">饼形图</option>
			</select>
		</td>
	</tr>
	</table>
<br />
<table class="data_list_table">
	<tr>
		<th>编号</th>
		<th>客户名称</th>
		<th>订单金额（元）</th>
	</tr>
	<tr v-for="l in listgx">
		<td >{{l.cust_no}}</td>
		<td >{{l.label}}</td>
		<td >{{l.value}}</td>
	</tr>

</table>
	<div id="chartContainer">FusionCharts XT will load here!</div>
</div>
</body>
	<script>
		var app = new Vue({
            el:'#query',
            data:{
                listgx:[],
                years:[],
                gx: {
                    label: '',
                    year: '',
                    tb:'column3d',
               	 }
                },
                methods:{
                    bylike(){
                        $.post("/querygx/",this.gx,function (json) {
                            app.listgx=json.data.list;
                            $("#chartContainer").insertFusionCharts({
                                type: app.gx.tb,
                                width: "700",
                                height: "400",
                                dataFormat: "json",
                                renderAt:"chartContainer",
                                dataSource: {
                                    "chart": {
                                        "caption": "客户贡献分析",
                                        "xAxisName": "客户名称",
                                        "yAxisName": "订单金额",
                                        "numberSuffix": "元",
                                        "theme":"fusion"
                                    },
                                    "data":app.listgx
                                }
                            });
                        });
                    },
					bh(){
                        $("#chartContainer").insertFusionCharts({
                            type: app.gx.tb,
                            width: "700",
                            height: "400",
                            dataFormat: "json",
                            renderAt:"chartContainer",
                            dataSource: {
                                "chart": {
                                    "animateClockwise": "1",
                                    "caption": "客户贡献分析",
                                    "xAxisName": "客户名称",
                                    "yAxisName": "订单金额",
                                    "numberSuffix": "元",
                                    "theme":"fusion"
                                },
                                "data":app.listgx

                            }
                        });
					}
                },
                created(){
                    $.getJSON("/querygx",function (json) {
                        app.listgx=json.data.list;
                        $("#chartContainer").insertFusionCharts({
                            type: app.gx.tb,
                            width: "700",
                            height: "400",
                            dataFormat: "json",
                            renderAt:"chartContainer",
                            dataSource: {
                                "chart": {
                                    "animateClockwise": "1",
                                    "caption": "客户贡献分析",
                                    "xAxisName": "客户名称",
                                    "yAxisName": "订单金额",
                                    "numberSuffix": "元",
                                    "theme":"fusion"
                                },
                                "data":app.listgx
                            }
                        });
                    });

                    $.getJSON("/queryyear",function (year) {
						app.years=year.data.yearlist;
                    });
                }
		});
	</script>

</html>